<template>
    <div class="order-container">
        <el-table :data="orderList" style="width: 100%" :loading="loading">
            <el-table-column prop="orderId" label="订单编号"></el-table-column>
            <el-table-column prop="hotelName" label="酒店名称"></el-table-column>
            <el-table-column prop="hotelRoomTypeName" label="房型"></el-table-column>
            <el-table-column prop="totalAmount" label="总价"></el-table-column>
            <el-table-column prop="status" label="订单状态">
                <template slot-scope="scope">
                    <el-tag :type="getStatusType(scope.row.status)">
                        {{ getStatusText(scope.row.status) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="房间状态" align="center" prop="roomStatus">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.roomStatus == 1">已入住</el-tag>
                        <el-tag v-else-if="scope.row.roomStatus == 2">已退房</el-tag>
                    </template>
                </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="handleCancel(scope.row)"
                        v-if="scope.row.status === '0'">取消</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.status === 1"
                        @click="handlePay(scope.row)">支付</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="prev, pager, next"
            :total="total" style="text-align: center; margin: 20px 0;">
        </el-pagination>

        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="50%">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="订单编号">{{ currentOrder.orderId }}</el-descriptions-item>
                <el-descriptions-item label="酒店名称">{{ currentOrder.hotelName }}</el-descriptions-item>
                <el-descriptions-item label="房型">{{ currentOrder.hotelRoomType }}</el-descriptions-item>
                <el-descriptions-item label="入住日期">{{ formatDateTime(currentOrder.inDate) }}</el-descriptions-item>
                <el-descriptions-item label="退房日期">{{ formatDateTime(currentOrder.outDate) }}</el-descriptions-item>
                <el-descriptions-item label="支付方式">{{ currentOrder.payTypeName }}</el-descriptions-item>
                <el-descriptions-item label="总价">{{ currentOrder.totalAmount }}元</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    <el-tag :type="getStatusType(currentOrder.status)">
                        {{ getStatusText(currentOrder.status) }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ currentOrder.createTime }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <el-dialog title="选择支付方式" :visible.sync="payDialogVisible" width="30%">
            <div class="pay-methods">
                <el-button type="primary" icon="el-icon-alipay" @click="selectPayMethod(1)">支付宝支付</el-button>
                <el-button type="success" icon="el-icon-chat-dot-round" @click="selectPayMethod(2)">微信支付</el-button>
            </div>
            <div v-if="selectedPayMethod" class="pay-detail">
                <div class="pay-info">
                    <p class="amount">支付金额：<span>¥{{ currentOrder.totalAmount }}</span></p>
                    <p class="order-id">订单编号：{{ currentOrder.orderId }}</p>
                </div>
                <div class="qrcode-container">
                    <el-image :src="require('@/assets/image/zfm.jpg')" alt="支付二维码" class="qrcode"></el-image>
                    <p class="qrcode-tip">请使用{{ selectedPayMethod === 1 ? '支付宝' : '微信' }}扫码支付</p>
                </div>
                <div class="pay-actions">
                    <el-button type="primary" @click="confirmPay">确认支付</el-button>
                    <el-button @click="cancelPay">取消支付</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getOrderList, delOrder, getOrderEdit } from '@/api'

export default {
    name: 'Order',
    data() {
        return {
            loading: true,
            total: 0,
            orderList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            dialogVisible: false,
            payDialogVisible: false,
            currentOrder: {},
            selectedPayMethod: '',
            qrcodeUrl: ''
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.loading = true
            getOrderList(this.queryParams).then(response => {
                this.orderList = response.rows
                this.total = response.total
                this.loading = false
            }).catch(() => {
            })
        },
        handleView(row) {
            this.currentOrder = row
            this.dialogVisible = true
        },
        handleCancel(row) {
            this.$confirm('确认要取消该订单吗?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                return delOrder(row.orderId)
            }).then(() => {
                this.getList()
            })
        },
        getStatusType(status) {
            const statusMap = {
                '1': 'primary',
                '2': 'success',
                '3': '',
            }
            return statusMap[status] || 'info'
        },
        getStatusText(status) {
            const statusMap = {
                '1': '待支付',
                '2': '已支付',
                '3': '已取消',
            }
            return statusMap[status] || '未知状态'
        },
        formatDateTime(dateTime) {
            if (!dateTime) return '';
            const date = new Date(dateTime);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.getList()
        },
        handlePay(row) {
            this.currentOrder = row
            this.payDialogVisible = true
            this.selectedPayMethod = ''
            this.qrcodeUrl = ''
        },
        selectPayMethod(method) {
            this.selectedPayMethod = method
        },
        confirmPay() {
            getOrderEdit({
                orderId: this.currentOrder.orderId,
                payType: this.selectedPayMethod,
                status: 2
            }).then(response => {
                this.$message.success('支付成功')
                this.payDialogVisible = false
                this.getList()
            })
        },
        cancelPay() {
            this.selectedPayMethod = ''
            this.qrcodeUrl = ''
            this.payDialogVisible = false
        },
    }
}
</script>

<style scoped>
.order-container {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

.el-table {
    width: 100% !important;
    margin-bottom: 20px;
}

.el-table .el-table__body-wrapper {
    overflow-x: auto;
}

.el-table .el-table__header-wrapper {
    overflow-x: auto;
}

.pay-methods {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
}

.pay-methods .el-button {
    width: 120px;
    height: 40px;
}

.pay-detail {
    margin-top: 20px;
    text-align: center;
}

.pay-info {
    margin-bottom: 20px;
}

.pay-info .amount {
    font-size: 18px;
    margin-bottom: 10px;
}

.pay-info .amount span {
    color: #f56c6c;
    font-weight: bold;
}

.qrcode-container {
    margin: 20px 0;
}

.qrcode {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
}

.qrcode-tip {
    color: #666;
    font-size: 14px;
}

.pay-actions {
    margin-top: 20px;
}

.pay-actions .el-button {
    margin: 0 10px;
}
</style>